<template>
  <div class="changePassword">
    <div class="form">
      <div class="form-item">
        <picker
          :range="durationData"
          :value="duration"
          @change="durationChange">
          <CustomWrapInput
            v-model="formItem.duration"
            title="充值时长"
            desc="会员：30元/月"
            placeholder="充值时长"
            :isInput="false" />
        </picker>
      </div>
    </div>

    <div class="money">
      ¥ {{money}} 元
    </div>

    <div class="action">
      <button @tap="actionClick">充值</button>
    </div>
  </div>
</template>

<script>
import CustomWrapInput from 'components/CustomWrapInput/CustomWrapInput'
import { rechargeDurationList } from 'common/js/modules'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomWrapInput
  },
  computed: {
    money () {
      const num = this.rechargeDurationList[this.duration].num
      return num * 30
    }
  },
  created () {
    this.initDurationList()
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      formItem: {},
      durationData: [],
      duration: '0'
    }
  },
  methods: {
    durationChange (e) {
      this.duration = e.target.value
      this.formItem.duration = this.durationData[this.duration]
    },
    initDurationList () {
      this.rechargeDurationList = rechargeDurationList()

      const arr = []

      this.rechargeDurationList.map(item => {
        arr.push(item.value)
      })

      this.durationData = arr
    },
    initData () {
      this.duration = '0'
      this.formItem = {
        duration: '1个月'
      }
    },
    deleteCustomKey (obj) {
      for (let key in obj) {
        if (key.indexOf('__custom_') > -1 || obj[key] === null) {
          delete obj[key]
        }
      }
    },
    actionClick () {
      if (!this.formItem.duration) {
        this.$showToast({
          title: '请选择充值时长',
          icon: 'none'
        })
        return
      }

      console.log(this.formItem)

      // this.changePassword()
    }
    // async changePassword () {
    //   this.$showLoading('修改中')

    //   const obj = JSON.parse(JSON.stringify(this.formItem))

    //   this.deleteCustomKey(obj)

    //   const res = await changePassword(obj)

    //   this.$hideLoading()

    //   if (res.code === ERR_OK) {
    //     this.$showToast({
    //       title: '修改成功',
    //       success: () => {
    //         logout(this.isTenantLogin)

    //         wx.reLaunch({
    //           url: '/pages/login/main'
    //         })
    //       }
    //     })
    //   } else {
    //     this.$showToast({
    //       title: res.msg,
    //       icon: 'none'
    //     })
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
  @import "~common/scss/color";

  .changePassword {
    width: 100%;
    height: 100%;
    position: relative;
    > .form {
      padding: 0 10px;
      > .form-item {
        border-bottom: 1px solid rgb(232, 232, 232);
      }
    }
    > .money {
      text-align: right;
      padding-right: 15px;
      padding-top: 20px;
    }
    > .action {
      width: 90%;
      margin: 0 auto;
      margin-top: 20px;
      > button {
        background-color: $color-default;
        color: white;
      }
    }
  }
</style>
